<template>
  <div class="container">
    <el-tabs v-model="currentIndex" tab-position="left" type="card" @tab-click="tabClick">
      <div class="title">{{ currentTitle }}</div>
      <el-tab-pane :label="item.title" :name="String(index)" v-for="(item, index) in baseSets" :key="item.bsType" v-loading="loading">
        <div v-for="(element, i) in item.fields" :key="i">
          <div class="element-wrapper">
            <!-- form-item-label -->
            <div v-if="item.fields.length > 1" class="element-label">{{ element.label }}</div>
            <!-- form-item -->
            <editor :ref="'editor' + index" v-model="element.bsContent" :height="500" v-if="element.type == 'editor' && index == currentIndex"></editor>

            <el-input v-model="element.bsContent" v-if="element.type == 'input' && index == currentIndex"
              style="width: 500px;" :placeholder="element.placeholder" :maxlength="element.max || 999">
              <template slot="append" v-if="element.suffix">{{ element.suffix }}</template>
            </el-input>

            <imageUpload :limit="1" v-model="element.bsContent" v-if="element.type == 'image' && index == currentIndex"></imageUpload>
          </div>
        </div>
      </el-tab-pane>
      <div class="btn-wrapper">
        <el-button type="primary" @click="submit" class="submit-btn">保存</el-button>
      </div>
    </el-tabs>


  </div>
</template>
<script>
//  类型：1用户协议；2隐私政策；3客服电话；4管理员电话
import { getBaseSet, updateBaseSet} from '@/api/spoken/baseSet'
export default {
  data() {
    return {
      currentIndex: 0,
      currentTitle: '用户协议',
      baseSets: [
        { title: '用户协议', fields: [
            { label: '用户协议', bsType: 1, type: 'editor', bsContent: '', bsId: '' }
          ]
        },
        { title: '隐私政策', fields: [
            { label: '隐私政策', bsType: 2, type: 'editor', bsContent: '', bsId: '' }
          ]
        },
        { title: '客服电话', fields: [
            { label: '客服电话', bsType: 3, type: 'input', placeholder: '请输入客服电话', bsContent: '', bsId: '' }
          ]
        },
        { title: '管理员电话', fields: [
            { label: '管理员电话', bsType: 4, type: 'input', placeholder: '请输入管理员电话', bsContent: '', bsId: '' }
          ]
        }
      ],
      loading: false
    };
  },
  created() {
    this.getBaseType()
  },
  methods: {
    tabClick(e) {
      this.currentTitle = e.label
      this.getBaseType()
    },
    getBaseType() {
      this.loading = true
      const baseSets = this.baseSets[this.currentIndex].fields
      const promiseArr = []
      baseSets.forEach(item => {
        promiseArr.push(getBaseSet(item.bsType))
      })
      Promise.all(promiseArr).then(res => {
        this.loading = false
        baseSets.forEach((item, index) => {
          item.bsContent = res[index].data.bsContent
          item.bsId = res[index].data.bsId
        })
      })
    },
    submit() {
      const baseSets = this.baseSets[this.currentIndex].fields
      baseSets.forEach(item => {
        if (!item.bsContent || (item.type == 'editor' && item.bsContent == '<p><br></p>')) {
          this.$modal.msgError('请输入' + item.label)
          throw new Error()
        }
        // if(item.bsType == 3 && !/^1[3,4,5,6,7,8,9][0-9]{9}$/.test(item.bsContent)){
        //   this.$modal.msgError('请输入正确的客服电话')
        //   throw new Error()
        // }
        if(item.bsType == 4 && !/^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/.test(item.bsContent)){
          this.$modal.msgError('请输入正确的上架手续费')
          throw new Error()
        }
      })
      

      // 提交
      const promiseArr = []
      baseSets.forEach(item => {
        promiseArr.push(updateBaseSet({ bsId: item.bsId, bsContent: item.bsContent }))
      })
      Promise.all(promiseArr).then(res => {
        this.$modal.msgSuccess('提交成功')
      })
    }
  }
};
</script>

<style scoped>
.container {
  min-height: calc(100vh - 84px);
}

/deep/ .el-tabs__item {
  padding: 5px 30px !important;
  box-sizing: content-box !important;
}

/deep/ .el-tab-pane {
  padding: 30px;
  width: 800px;
}

.title {
  width: 800px;
  text-align: center;
  font-size: 30px;
  padding: 20px 0;
  margin: 0;
}

.btn-wrapper {
  width: 800px;
  text-align: center;
}

.element-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

}

.element-label {
  width: 100px;
}
</style>